<template>
  <div style="width: 100%; height: 100%;">
    <div style="width: 100%; height: 115%;margin-left: 10px;" ref="mychart" ></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
   //  数据可视化
    props:{
        dataList:[1200, 2230, 1900, 2100, 3500, 4200, 3985],
    },

    data(){
        return {

            serData:this.dataList,
            option : {
                tooltip: {
                    trigger: 'item',
                    formatter: function(e) {
                        // params 是一个数组，包含了触发提示框的所有数据项信息
                       
                        var result = e.value + '<br>'; // 假设第一个数据项包含了名称信
                        return result;
                    }
                },
               
                    title:{
                        text:'近七天景区游客量',
                        left:'center',
                        top:'20px',
                        textStyle: {
                            color: '#fff',  // 设置标题文字颜色为蓝色
                            fontSize: 14,    // 设置标题文字大小为18px
                            fontWeight: 'bold'  // 设置标题文字加粗
                        }
                    },
                    xAxis: {
                        data: ['1', '2', '3', '4', '5','6','7'],
                        axisLine: {
                            lineStyle: {
                                color: '#fff'  // 设置坐标轴线的颜色为红色
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '游客量',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'  // 设置坐标轴线的颜色为红色
                            }
                        }
                    },
                    series: [
                        {
                        data: [566,674,564,565,334,553,887],
                        type: 'line',
                        areaStyle: {}
                        }
                    ]
}
        }
    },
    mounted(){
        this.$nextTick(() => {
                // if (this.chinachart == null) {
                    this.init(this.dataList)
                // }
            });
    },
    watch:{
        'DataList':function(val){
             this.init(val)
          }
    },
    methods:{
      init(dataList){
        var mychart = echarts.init(this.$refs.mychart)
       
        this.option.series[0].data = dataList
       
        mychart.setOption(this.option)
      }
    }
}
</script>

<style lang="less" scoped>


</style>

